<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import type { ComponentSize } from 'element-plus'
import { useClassificationListStore } from '../../store/classificationList'
import classification from '../../api/classification'
const size = ref<ComponentSize>('default')
const classificationListStore = useClassificationListStore()
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = async() => {
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then(res => {
        classificationListStore.classificationList = res.data.data
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}
const handleCurrentChange = async() => {
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then(res => {
        classificationListStore.classificationList = res.data.data
    }).finally(() => {
        classificationListStore.changeLoading()
    })
}

onMounted(async () => {
    classification.getClassificationListCount().then((res) => {
        classificationListStore.total = res.data.data
    })
})
</script>
<template>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="classificationListStore.pageNum" v-model:page-size="classificationListStore.pageSize"
            :page-sizes="[5, 10, 15, 20]" :size="size" :disabled="disabled" :background="background" :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper" :total="classificationListStore.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>
<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: end;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    :deep(.el-pagination .el-pagination__sizes)  {
    display: none;
  }
  .demo-pagination-block :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }
}
</style>